<template>
  <div class="main">
    <!--    顶部导航条-->
    <navheader></navheader>
<!--    主体内容-->
    <div class="deals_tables p-5">
      <div class="menu">
        <el-menu
            router
            :default-active="$route.path"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#6B8372"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="/Deal_Main/My_Buy_Deals">
            <span class="titlefontclass">我发起的交易</span>
          </el-menu-item>
          <el-menu-item index="/Deal_Main/My_Sale_Deals">
            <span class="titlefontclass">我收到的交易</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="tables">
        <router-view></router-view>
      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from "@/components/myfooter";
import navheader from "@/components/navheader";

export default {
   name: "deal_main",
   components:{
    myfooter,
    navheader
   },
  data(){
    return {

    }
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {

  },
}
</script>

<style scoped>
.deals_tables{
  margin-top: 60px;
}
/*选项卡的字体*/
.titlefontclass{
  font-size: 20px;
  font-weight: bold;
}
.titlefontclass:hover{
  color: #ffd04b;
}
</style>
